<template>
  <div class="performance-detail">
    <a-card title="绩效详情">
      <template #extra>
        <a-button @click="goBack">返回列表</a-button>
        <a-button type="primary" @click="goToEdit" style="margin-left: 10px">编辑</a-button>
      </template>

      <a-descriptions bordered :column="2">
        <a-descriptions-item label="员工姓名">{{ performanceInfo.employeeName }}</a-descriptions-item>
        <a-descriptions-item label="工号">{{ performanceInfo.employeeId }}</a-descriptions-item>
        <a-descriptions-item label="考核类型">{{ getTypeLabel(performanceInfo.type) }}</a-descriptions-item>
        <a-descriptions-item label="考核周期">{{ performanceInfo.period }}</a-descriptions-item>
        <a-descriptions-item label="评分">
          <a-rate :value="performanceInfo.score" disabled />
        </a-descriptions-item>
        <a-descriptions-item label="考核人">{{ performanceInfo.reviewer }}</a-descriptions-item>
        <a-descriptions-item label="考核日期">{{ performanceInfo.reviewDate }}</a-descriptions-item>
        <a-descriptions-item label="考核评语" :span="2">
          {{ performanceInfo.comment || '无' }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { getPerformanceDetail, getMockPerformanceTypes } from '@/api/performance'

const route = useRoute()
const router = useRouter()
const performanceInfo = ref({
  employeeName: '',
  employeeId: '',
  type: 1,
  period: '',
  score: 3,
  reviewer: '',
  reviewDate: '',
  comment: ''
})
const performanceTypes = ref([])

// 获取考核类型标签
const getTypeLabel = (value) => {
  const type = performanceTypes.value.find(item => item.value === value)
  return type ? type.label : '未知类型'
}

// 获取绩效详情
const fetchPerformanceDetail = async () => {
  try {
    const res = await getPerformanceDetail(route.params.id)
    performanceInfo.value = res.data
  } catch (error) {
    message.error('获取绩效详情失败')
    console.error(error)
  }
}

// 获取绩效类型
const fetchPerformanceTypes = async () => {
  try {
    const res = await getMockPerformanceTypes()
    performanceTypes.value = res.data
  } catch (error) {
    console.error('获取绩效类型失败', error)
  }
}

// 跳转编辑页
const goToEdit = () => {
  router.push(`/performance/edit/${route.params.id}`)
}

// 返回列表
const goBack = () => {
  router.push('/performance/list')
}

onMounted(() => {
  fetchPerformanceDetail()
  fetchPerformanceTypes()
})
</script>

<style scoped>
.performance-detail {
  padding: 20px;
}

.ant-descriptions {
  margin-top: 20px;
}
</style>